<template>
  <div class="dlg">
    <el-dialog
      :title="categoryName"
      :visible="showDlg"
      :show-close="false"
      width="60%"
      @open="refreshList"
    >
      <el-card class="selected">
        <div slot="header">
          <el-alert title="已选择的机构" type="success" effect="dark" :closable="false"></el-alert>
        </div>
        <el-tag
          v-for="item of selectedOrgVoList"
          :key="item.orgId"
          @click="removeOrgCategoryLink(item.orgId)"
        >{{item.orgName}}</el-tag>
      </el-card>
      <el-card class="unselected">
        <div slot="header">
          <el-alert title="未选择的机构" type="warning" effect="dark" :closable="false"></el-alert>
        </div>
        <el-tag
          v-for="item of unselectedOrgVoList"
          :key="item.orgId"
          type="danger"
          @click="addOrgCategoryLink(item.orgId)"
        >{{item.orgName}}</el-tag>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="$emit('close')">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { Dialog, Button, Tag, Card, Alert } from "element-ui";
import {
  getOrgCategoryEditList,
  addOrgCategoryLink,
  removeOrgCategoryLink
} from "@/api/first-loan.js";
export default {
  name: "edit-org-dlg",
  components: {
    [Dialog.name]: Dialog,
    [Button.name]: Button,
    [Tag.name]: Tag,
    [Card.name]: Card,
    [Alert.name]: Alert
  },
  props: {
    showDlg: Boolean,
    categoryId: Number
  },
  data() {
    return {
      categoryName: "",
      selectedOrgVoList: [],
      unselectedOrgVoList: []
    };
  },
  methods: {
    refreshList() {
      getOrgCategoryEditList(this.categoryId)
        .then(res => {
          this.categoryName = res.firstLoanOrgCategoryName;
          this.selectedOrgVoList = res.selectedOrgVoList;
          this.unselectedOrgVoList = res.unselectedOrgVoList;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    addOrgCategoryLink(orgId) {
      addOrgCategoryLink({
        categoryId: this.categoryId,
        orgId: orgId
      })
        .then(res => {
          this.refreshList();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    removeOrgCategoryLink(orgId) {
      removeOrgCategoryLink({
        categoryId: this.categoryId,
        orgId: orgId
      })
        .then(res => {
          this.refreshList();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    }
  }
};
</script>
<style lang="stylus" scoped>
.el-tag {
  margin-right: 12px;
  margin-bottom: 5px;
  cursor: pointer;

  &:hover {
    background-color: #606266;
  }
}
</style>